<template>
  <div>
    <section>
      <div class="pattern">
        <div class="face face1"></div>
        <div class="face face2"></div>
      </div>
    </section>
  </div>
</template>



<script>
export default {};
</script>


<style lang="scss" scoped>
section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.pattern {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: animateBg 10s ease-in-out infinite;
}
@keyframes animateBg {
    0%,100%{
        transform: scale(1.6) rotate(-15deg);
    }
    50%{
        transform: scale(1.6) rotate(15deg);
    }
}
.pattern .face {
  position: relative;
  width: 100%;
  height: 50vh;
  background: url('../assets/img/check.jpg');
  background-size: 100px 100px;
  animation: animate 1s linear infinite;
}
.pattern .face.face2 {
  height: 100vh;
  transform-origin: top;
  transform: rotateX(70deg);
}
.pattern .face1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 125px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}
.pattern .face2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 125px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}

@keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 100px;
  }
}
</style>